<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax2以get方式传值处理</title>
  <script>
    function ajax2() {
//获取表单数据
        let name = document.querySelector(".name").value;
        let pwd = document.querySelector(".pwd").value;
        //1.创建ajax1对象
  let xmlHttpRequest = new XMLHttpRequest();

  xmlHttpRequest.open("get","/servletstudy_war_exploded/ajax2?name="+name+"&key="+pwd,true);

  xmlHttpRequest.onreadystatechange=function (){

    if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status==200){
      if (xmlHttpRequest.status==200){

        let data = xmlHttpRequest.responseText;
        console.log("data"+data);

        document.getElementById("show").innerHTML=data;
    }
    }
  }
  xmlHttpRequest.send();
    }
  </script>
</head>
<body>
<h1>前后端分离</h1>
<div id="show" style="border: solid 3px red;width: 500px;height: 100px; background: lightblue;">

</div>
姓名：<input type="text" class="name"><br>
密码：<input type="text" class="pwd"><br>
<button onclick="ajax2()">
  提交
</button>
</body>
</html>